import * as React from 'react';
import Header from '@/commonComponents/header/Header';
import useAuth from '@/utils/hooks/useAuth';
import UserHeader from '@/commonComponents/userHeader/index';
import PassengerInfo from './passengerInfo/index';
import { useNavigate, useSearchParams, useParams } from 'react-router-dom';
// import { RightOutline } from 'antd-mobile-icons';
import { Space, Button } from 'antd-mobile';
import { getUserInfo } from '../../utils/localStorge';
import { fetchPassengerInfo } from './indexApi';

import './index.module.scss';
// import { useNavigate } from 'react-router-dom';
import CameraIcon from './camera.svg';
import Item from 'antd-mobile/es/components/dropdown/item';
const { useEffect, memo, useState } = React;
export interface userInfo {
  avatar: string;
  username: string;
  token: string;
}
function PassengerDetail() {
  // useAuth();
  const { back } = useAuth();
  const userInfo = JSON.parse(getUserInfo()) || { avatar: '', username: '', token: '' };

  const scanCard = () => { };
  const [params] = useSearchParams();
  const bookerId = params.get('bookerId') || '';
  const [passengerData, setPassengerData] = useState({
    ticketType: "",
    booker: "",
    idCard: "",
    cardType: "",
    phoneNumber: ""
  })
  useEffect(() => {
    fetchPassengerInfo({ bookerId: bookerId }).then(res => {
      if (res.data.data.ticketType == 1) {
        res.data.data.ticketType = '成人票';
      } else if (res.data.data.ticketType == 2) {
        res.data.data.ticketType = '学生票';
      }
      if (res.data.data.cardType == 1) {
        res.data.data.cardType = '中国大陆身份证';
      } else if (res.data.data.cardType == 2) {
        res.data.data.cardType = '港澳居住证';
      }
      setPassengerData(res.data.data)
    })
  }, [bookerId])
  return (
    <div styleName="servies-box">
      <Header
        styleName="white-arrow"
        title={`新增乘客`}
        onBack={back}
        style={{
          background: '#1ba9ba',
          color: '#fff',
        }}
        type={4}
      />
      <div styleName="user-top">
        <UserHeader
          styleName="mt44"
          avatar={userInfo.avatar}
          username={userInfo.username}
        />
      </div>
      <Button styleName="scan-button" onClick={() => scanCard}>
        <Space align="center" justify="center">
          <CameraIcon />
          <span>扫描证件添加</span>
        </Space>
      </Button>
      <PassengerInfo passengerData={passengerData} />
      <div styleName="provider">本次购票服务由八维票务提供</div>
    </div>
  );
}

export default memo(PassengerDetail);
